import React, { Component } from 'react';

import { connect } from 'react-redux';

import {
  WingBlank,
  WhiteSpace,
  InputItem,
  Button,
  Toast
} from 'antd-mobile';

import './Login.less';

import logo from '../../assets/img/logo.jpg';

import { login } from '../../services';

import { loginSuccess, loginFailed } from '../../actions/user';

@connect(null, { loginSuccess, loginFailed })

export default class Login extends Component {

  constructor() {
    super();
    this.state = {
      username: '',
      password: '',
      hasUsernameError: false,
      hasPasswordError: false
    }
  }

  onUsernameChange = (username)=> {
    this.setState({
      username
    }, ()=> {
      this.validateUsername();
    })
  }

  onPasswordChange = (password)=> {
    this.setState({
      password
    }, ()=> {
      this.validatePassword();
    })
  }

  validateLength = (value)=> {
    return value.length <= 16 && value.length >= 6
  }

  validateUsername() {
    if(!this.validateLength(this.state.username)) {
      this.setState({
        hasUsernameError: true
      })
    } else {
      this.setState({
        hasUsernameError: false
      })
    }
  }

  validatePassword() {
    if(!this.validateLength(this.state.password)) {
      this.setState({
        hasPasswordError: true
      })
    } else {
      this.setState({
        hasPasswordError: false
      })
    }
  }

  onUsernameErrorClick = ()=> {
    Toast.fail("用户名必须是6-16位")
  }

  onPasswordErrorClick = ()=> {
    Toast.fail("密码必须是6-16位")
  }

  login = ()=> {

    const {
      username,
      password,
      hasUsernameError,
      hasPasswordError
    } = this.state;

    if(username === "" || password === "") {
      return Toast.fail("用户名或密码不能为空");
    }

    if(hasUsernameError || hasPasswordError) {
      return Toast.fail("用户名或密码必须是6-16位");
    }

    login({
      username,
      password
    }).then(resp => {
      const { from = '/home'} = this.props.location.state || {};
      /**
       * let state = {}
       * if(this.props.location.state) {
       *   state = this.props.location.state;
       * }
       * let { from } = state;
       * if(!from) {
       *   from = '/home';
       * }
       */
      window.localStorage.setItem('cors-token', resp.data.token);
      this.props.loginSuccess();
      console.log(from);
      this.props.history.push(from);
    }).catch(err => {
      window.localStorage.removeItem('cors.token');
      this.props.loginFailed();
    })

  }

  render() {
    return (
      <div>
        <WingBlank>
          <WhiteSpace/>
          <div className="wgd-logo">
            <img src={logo} alt="wgd" />
          </div>
          <WhiteSpace />
          <InputItem
            type="text"
            placeholder="请输入用户名"
            name="username"
            onChange={this.onUsernameChange}
            value={this.state.username}
            error={this.state.hasUsernameError}
            onErrorClick={this.onUsernameErrorClick}
          >
            用户名
          </InputItem>
          <InputItem
            type="password"
            placeholder="请输入密码"
            name="password"
            onChange={this.onPasswordChange}
            value={this.state.password}
            error={this.state.hasPasswordError}
            onErrorClick={this.onPasswordErrorClick}
          >
            密码
          </InputItem>
          <WhiteSpace />
          <Button type="primary" onClick={this.login}>登录</Button>
        </WingBlank>
      </div>
    )
  }
}
